<template>
  <div class="container">
    <div class="row">
      <div class="card-wrapper col-sm-4"  v-for="item in theme">
        <img :src="item.thumbnail" class="img"/>
        <router-link class="hover" :to="{path: '/detail',params:{id: 123}}">
          <div class="card-title">{{item.description}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<style>
      .card-wrapper{
        margin-top:30px;
        height:280px;
        position:relative;
        .img,.hover{
          width:300px;
          height:280px;
          position:absolute;
          top:0;
          left:50%;
          margin-left:-150px;
        }
        .hover{
          display:inline-block;
          color:#fff;
          font-weight:bold;
          background:rgba(0, 0, 0, 0.25);
          cursor:pointer;
           &:hover, &:focus, &:active {
              text-decoration: none;
              outline:2px solid #33a9d8;
           }
          .card-title{
             width:260px;
             position:absolute;
             top:210px;
             left:50%;
             margin-left:-130px;
             text-overflow: ellipsis;
             overflow: hidden;
             font-size:18px;
             line-height: 28px;
          }
        }
      }
</style>
<script>
    export default{
    data(){
        return{
            theme:{}
        }
    },
      created() {
        this.$http.get('/api/4/themes')
        .then(function(response){
                this.theme=response.body.others;
                console.info(this.theme);
            },function(error){
               //error
             });
      },
    }
</script>
